<template>
  <div id="el_dialog_input">
    <el-form :model="from">
      <el-alert class="el_alert_error" :closable="false" v-if="inputMessage.account.isNull" type="error">{{inputMessage.account.message}}</el-alert>
      <el-form-item label="账号">
        <el-input v-model="from.account"/>
      </el-form-item>

      <el-alert class="el_alert_error" :closable="false" v-if="inputMessage.name.isNull" type="error">{{inputMessage.name.message}}</el-alert>
      <el-form-item label="姓名">
        <el-input v-model="from.name"/>
      </el-form-item>

      <el-alert class="el_alert_error" :closable="false" v-if="inputMessage.password.isNull" type="error">{{inputMessage.password.message}}</el-alert>
      <el-form-item label="密码">
        <el-input type="password" v-model="from.password"/>
      </el-form-item>

      <el-alert class="el_alert_error" :closable="false" v-if="inputMessage.age.isNull" type="error">{{inputMessage.age.message}}</el-alert>
      <el-form-item label="年龄">
        <el-input v-model="from.age"/>
      </el-form-item>

      <el-alert class="el_alert_error" :closable="false" v-if="inputMessage.sex.isNull" type="error">{{inputMessage.sex.message}}</el-alert>
      <el-form-item label="性别">
        <el-select placeholder="请选择性别" v-model="from.sex">
          <el-option label="男" value="1"/>
          <el-option label="女" value="0"/>
        </el-select>
      </el-form-item>

      <el-alert class="el_alert_error" :closable="false" v-if="inputMessage.phone.isNull" type="error">{{inputMessage.phone.message}}</el-alert>
      <el-form-item label="手机号">
        <el-input v-model="from.phone"/>
      </el-form-item>

      <el-alert class="el_alert_error" :closable="false" v-if="inputMessage.roleId.isNull" type="error">{{inputMessage.roleId.message}}</el-alert>
      <el-form-item label="权限">
        <el-select placeholder="请选择权限" v-model="from.roleId">
          <el-option label="普通用户" value="2"/>
          <el-option label="管理" value="1"/>
          <el-option label="超级管理" value="0"/>
        </el-select>
      </el-form-item>

      <el-alert class="el_alert_error" :closable="false" v-if="inputMessage.isValid.isNull" type="error">{{inputMessage.isValid.message}}</el-alert>
      <el-form-item label="是否展现">
        <el-select placeholder="请选择" v-model="from.isValid">
          <el-option label="是" value="Y"></el-option>
          <el-option label="否" value="N"></el-option>
        </el-select>
      </el-form-item>
      <div id="el_dialog_submit">
        <el-button type="success" @click="submit">提交</el-button>
        <el-button type="danger" @click="reset">重置</el-button>
      </div>
    </el-form>

  </div>
</template>

<script>
  import '../assets/main.css'
  import axios from "axios";
  export default {
    components:[axios],
    data(){
      return{
        from:{
          account:"",
          name:"",
          password:"",
          age:'',
          sex:'',
          phone:"",
          roleId:'',
          isValid:""
        },
        // 显示报错信息
        inputMessage:{
          account:{
            isNull:false,
            message:""
          },
          name:{
            isNull:false,
            message:""
          },
          password:{
            isNull:false,
            message:""
          },
          age:{
            isNull:false,
            message:""
          },
          phone:{
            isNull:false,
            message:""
          },
          sex:{
            isNull:false,
            message:""
          },
          roleId:{
            isNull:false,
            message:""
          },
          isValid:{
            isNull:false,
            message:""
          }

        }
      }
    },
    methods: {
      // 提交按钮
      submit(message){
        // 验证是否符合条件 (如果不是正确的则：)
        if (! this.validateForm()) {
          return ;
        }

        axios.post("http://localhost:8090/user/save", this.from).then(res=>{
          if (!res.data.success){
            // 打印报错
            console.log(res.data.message);
            alert("新增失败！");
          }else {
            alert("新增成功");
            this.reset();
          }

        })
      },

      // 重置按钮
      reset(){
        for (let key in this.from){
          this.from[key] = "";
        }
      },

      // 条件验证
      validateForm() {
        const { account, name, password, age, sex, phone, roleId, isValid } = this.from;
        const {
          account: accountMessage,
          name: nameMessage,
          password: passwordMessage,
          age: ageMessage,
          sex: sexMessage,
          phone: phoneMessage,
          roleId: roleIdMessage,
          isValid: isValidMessage
        } = this.inputMessage;

        // 将弹窗设置为不显示
        for (let key in this.inputMessage) {
          if (this.inputMessage[key].isNull) {
            this.inputMessage[key].isNull = false;
          }
        }
        // 验证账户：不为空且是字符串，长度在 5 - 20 之间
        if (!account || typeof account!== 'string' || account.length < 5 || account.length > 20) {
          accountMessage.isNull = true;
          accountMessage.message = '账户格式错误，必须为 5 - 20 个字符的字符串';
          return false;
        }

        // 验证姓名：不为空且是字符串
        if (!name || typeof name!== 'string') {
          nameMessage.isNull = true;
          nameMessage.message = '姓名不能为空且应为字符串';
          console.log(nameMessage.message)
          return false;
        }

        // 验证密码：不为空且是字符串，长度在 6 - 16 之间
        if (!password || typeof password!== 'string' || password.length < 6 || password.length > 16) {
          passwordMessage.isNull = true;
          passwordMessage.message = '密码格式错误，必须为 6 - 16 个字符的字符串';
          return false;
        }

        // 验证年龄：是数字且在 0 - 150 之间
        if (isNaN(age) || parseInt(age) < 0 || parseInt(age) > 150) {
          ageMessage.isNull = true;
          ageMessage.message = '年龄格式错误，必须为 0 - 150 之间的数字';
          return false;
        }

        // 验证电话：是字符串且符合电话号码格式（此处仅为简单示例，实际需要更复杂的正则验证）
        const phoneRegex = /^\d{11}$/;
        if (!phone || typeof phone!== 'string' ||!phoneRegex.test(phone)) {
          phoneMessage.isNull = true;
          phoneMessage.message = '电话号码格式错误，必须为 11 位数字';
          return false;
        }

        // 验证性别：是数字且取值为 0 或 1
        if (isNaN(sex) || parseInt(sex)!== 0 && parseInt(sex)!== 1) {
          sexMessage.isNull = true;
          sexMessage.message = '性别格式错误，必须为 男 或 女';
          return false;
        }

        // 验证角色 ID：是数字且符合预期值（此处假设仅允许特定值）
        if (isNaN(roleId) || [0, 1, 2].indexOf(parseInt(roleId)) === -1) {
          roleIdMessage.isNull = true;
          roleIdMessage.message = '角色权限错误，必须为 超管、管理 或 普通用户';
          return false;
        }

        // 验证有效性：是字符串且只能是 'Y' 或 'N'
        if (!isValid || typeof isValid!== 'string' || (isValid!== 'Y' && isValid!== 'N')) {
          isValidMessage.isNull = true;
          isValidMessage.message = '有效性格式错误，必须为 "Y" 或 "N"';
          return false;
        }

        return true;
      }

      // 我是分割线--------------------------------


    }
  }
</script>

<style scoped>

</style>